<template>
    <el-descriptions direction="vertical" :column="4" v-if="loaded">
        <el-descriptions-item label="发票金额">
            <z-money :modelValue="invoice.amount" />
        </el-descriptions-item>
        <el-descriptions-item label="发票号码">
            {{ invoice.number }}
        </el-descriptions-item>
        <el-descriptions-item label="发票代码">
            {{ invoice.code }}
        </el-descriptions-item>
        <el-descriptions-item label="发票日期">
            <z-date :value="invoice.date" />
        </el-descriptions-item>
    </el-descriptions>
    <el-tabs v-model="pane" v-if="loaded">
        <el-tab-pane label="发票详情" name="detail">
            <el-descriptions column="2" border>
                <el-descriptions-item label="发票类型">
                    <z-dict readonly :modelValue="invoice.invoiceType" code="invoiceType" />
                </el-descriptions-item>
                <el-descriptions-item label="税率">
                    {{ invoice.rate }}%
                </el-descriptions-item>
                <el-descriptions-item label="发票金额">
                    <z-money :modelValue="invoice.amount" />
                </el-descriptions-item>
                <el-descriptions-item label="税额">
                    <z-money :modelValue="invoice.tax" />
                </el-descriptions-item>
                <el-descriptions-item label="创建人">
                    <z-avatar :value="invoice.creator" :plain="false" />
                </el-descriptions-item>
                <el-descriptions-item label="发票明细">
<!--                    <z-table :data="invoice.detail" :columns="invoiceColumns" />-->
                </el-descriptions-item>
            </el-descriptions>
        </el-tab-pane>
        <el-tab-pane v-if="invoice.type == 1 && invoice.invoice" label="开票信息" name="invoice">
            <el-descriptions column="1" border>
                <el-descriptions-item label="发票抬头">
                    {{ invoice.invoice.title.value }}
                </el-descriptions-item>
                <el-descriptions-item label="纳税人识别号">
                    {{ invoice.invoice.taxpayerIdNumber.value }}
                </el-descriptions-item>
                <el-descriptions-item label="开户银行">
                    {{ invoice.invoice.bankName.value }}
                </el-descriptions-item>
                <el-descriptions-item label="银行账号">
                    {{ invoice.invoice.bankAccountNo.value }}
                </el-descriptions-item>
                <el-descriptions-item label="地址">
                    {{ invoice.invoice.address.value }}
                </el-descriptions-item>
                <el-descriptions-item label="详细地址">
                    {{ invoice.invoice.detailAddress.value }}
                </el-descriptions-item>
                <el-descriptions-item label="电话">
                    {{ invoice.invoice.phone.value }}
                </el-descriptions-item>
            </el-descriptions>
        </el-tab-pane>
        <el-tab-pane v-if="invoice.type == 1 && invoice.mail" label="邮寄信息" name="mail">
            <el-descriptions column="1" border>
                <el-descriptions-item label="收件人">
                    {{ invoice.mail.receiver.value }}
                </el-descriptions-item>
                <el-descriptions-item label="电话">
                    {{ invoice.mail.receiverPhone.value }}
                </el-descriptions-item>
                <el-descriptions-item label="邮寄地址">
                    {{ invoice.mail.receiverAddress.value }}
                </el-descriptions-item>
                <el-descriptions-item label="详细地址">
                    {{ invoice.mail.receiverDetailAddress.value }}
                </el-descriptions-item>
                <el-descriptions-item label="邮箱">
                    {{ invoice.mail.receiverEmail.value }}
                </el-descriptions-item>
            </el-descriptions>
        </el-tab-pane>
    </el-tabs>
</template>

<script>

export default {
    props: {
        params: Object
    },
    data() {
        return {
            invoice: null,
            pane: "detail",
            invoiceColumns: [
                { label: "名", name: "title" },
            ],
            loaded: false
        };
    },

    async created() {
        const id = this.params.id
        this.invoice = await $.get({ url: "/do/get/invoice", data: { id } })
        this.loaded = true
    },
};
</script>
